<template>
  <page-wrap>
    <div class="scan-container">
      <div class="scan-container-title">使用微信扫码取号</div>
      <div class="scan-container-main">
        <!-- <img :src="code" style="width: 300px; height: 300px;border-radius: 8px;" alt="QR Code"/> -->
        <canvas ref="qrCanvas"></canvas>     
      </div>
      <div style="height: 30px;"></div>
      <!-- <div class="scan-container-prompt">
        有效期10分钟，扫码取号成功后自动刷新
      </div> -->
      <div class="scan-container-footer" @click="reflesh">刷新</div>    
                                                                                                                                                 
    </div>
  </page-wrap>
</template>

<script setup>
// import code from '@/assets/images/queue/i_queue-code.png'
import Api from '@/api'
import ls from '@/lib/ls'
import QRCode from 'qrcode'
import logo from '@/assets/images/common/i_icon_2logo.png'

const code = ref('')
console.log(import.meta.env.VITE_BASE_API);
console.log(ls.get('BRAND_CODE'));

// 版本 正式版为 release 体验版为 trial 开发版为 develop
let baseUrl = ref('')
const params = { link: 'queue', org: ls.get('ORG_CODE'),code:'',brd:ls.get('BRAND_CODE') }


const logo1 = ls.get('LOGO') || ''

const reflesh = ()=>{
  generateQRCode(baseUrl.value,params,logo1)
}
const qrCanvas = ref(null);

const generateQRCode = async (baseUrl,params,logoUrl) => {
  console.log(baseUrl,params);
  
  if (qrCanvas.value) {
    const urlWithParams = `${baseUrl}?${new URLSearchParams(params).toString()}`;
    await QRCode.toCanvas(qrCanvas.value, urlWithParams, { width: 300,margin: 2 });

    addLogoToQRCode(qrCanvas.value, logoUrl);
    
  }
};

const addLogoToQRCode = (qrCodeCanvas, logoUrl) => {
  const ctx = qrCodeCanvas.getContext('2d');
  const logoImg = new Image();
  const qrCodeImg = new Image();

  logoImg.onload = () => {
    qrCodeImg.onload = () => {
      const logoSize = Math.floor(qrCodeCanvas.width / 5); // Adjust logo size
      ctx.drawImage(qrCodeImg, 0, 0);
      ctx.drawImage(logoImg, (qrCodeCanvas.width - logoSize) / 2, (qrCodeCanvas.height - logoSize) / 2, logoSize, logoSize);
    };
    qrCodeImg.src = qrCodeCanvas.toDataURL();
  };
  logoImg.src = logoUrl;
};

onMounted(() => {
  if(ls.get('BRAND_CODE') == '0003'){ // 没有开发版

    baseUrl.value = 'https://jtmckj.com/qnjg/'; 

  }else if (ls.get('BRAND_CODE') == '0002'){
    baseUrl.value = 'https://jtmckj.com/mt/'; 

  }else if (ls.get('BRAND_CODE') == '0004'){
    
    baseUrl.value = 'https://jtmckj.com/ch/';  

  }else if (ls.get('BRAND_CODE') == '0005'){

    baseUrl.value = 'https://jtmckj.com/kbq/';

  }else if (ls.get('BRAND_CODE') == '0006'){
    
    baseUrl.value = 'https://jtmckj.com/tgx/';  

  }else if (ls.get('BRAND_CODE') == '0007'){
    
    baseUrl.value = 'https://jtmckj.com/zttt/';  

  }else if (ls.get('BRAND_CODE') == '0008'){
    
    baseUrl.value = 'https://jtmckj.com/xxc/';  

  }else if (ls.get('BRAND_CODE') == '0009'){
    
    baseUrl.value = 'https://jtmckj.com/ylly/';  

  }else if (ls.get('BRAND_CODE') == '0010'){
    
    baseUrl.value = 'https://jtmckj.com/xy/';  

  }else if (ls.get('BRAND_CODE') == '0011'){
    
    baseUrl.value = 'https://jtmckj.com/ams/';

  }else if (ls.get('BRAND_CODE') == '0029'){
    
    baseUrl.value = 'https://jtmckj.com/as/';  

  }
  console.log(baseUrl.value);
  
  generateQRCode(baseUrl.value,params,logo1);
});

</script>

<style scoped lang="scss">
.scan-container {
  padding: 0 38px;
  .scan-container-title {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #cccccc;
    line-height: 24px;
    margin: 30px 0;
    text-align: center;
  }
  .scan-container-main {
    display: flex;
    justify-content: center;
  }
  .scan-container-prompt {
    text-align: center;
    margin: 20px 0 30px;
    background: #28282e;
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #cccccc;
    line-height: 12px;
    padding: 4px 40px;
  }
  .scan-container-footer {
    margin: 0 auto;
    width: 120px;
    text-align: center;
    padding: 8px 0px;
    background: #5c5c66;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 16px;
  }
}
canvas {
  border-radius: 8px;
}
</style>
